/*
  一、React事件处理的概述
  在React中可以使用原生事件(js的事件处理)，也可以使用合成事件
  1、React原生事件的处理
  原生的事件绑定有三种方式
  1)、标签方法
  2)、DOM0级
  3)、DOM2级
  原生事件在react中的不足
  1)、在每一个事件源上绑定事件，比较消耗性能
  2)、会存在浏览器的兼容性问题
  2、合成事件的原理
  在16版本上它是绑在document对象上
  在17版本之后它是绑在root根容器上
  3、如何将18版本降到16版本
  1）卸载18版本
  2) 安装react16版本,执行npm i react@16 react-dom@16
  3) 在index.js中入口文件代码要换成
  import ReactDOM from 'react-dom'
  ReactDOM.render(<App/>,document.getElementById('root'))

  二、合成事件的绑定语法
  1、<button onClick={()=>{}}>:坏处：可读性很差
  2、<button onClick={this.成员方法}> 缺点有两个:1)、没有this指向 2)传参太难
  3、<button onClick={this.箭头函数}> 缺点有1个: 1)传参太难
  4、<button onClick={()=>{this.方法()}}> 较为完美
*/

import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()
    // console.log('this',this);
    this.handle1 = this.handle1.bind(this)
   
  }
  //相当于vue的mouted
  // componentDidMount(){
  //   document.querySelector("#btn1").onclick=function(){
  //     console.log('DOM0级的事件绑定');
  //   }
  //   document.querySelector('#btn2').addEventListener('click',function(){
  //     console.log('DOM2级的事件绑定');
  //   })
  // }

  handle1(e) {
    console.log('handle1事件绑定', this)
  }
  handle2 = (e) => {
    console.log('handle2事件绑定', this)
  }
  handle3 = (arg1, arg2, arg3, arg4) => {
    console.log('handle3事件绑定', arg1, arg2, arg3, arg4)
  }
  render() {
    return (
      <div>
        {/* <button id='btn1'>DOM0事件绑定</button>
         <button id='btn2'>DOM2事件绑定</button> */}

        <button
          onClick={() => {
            console.log('合成事件1')
          }}>
          合成事件1
        </button>
        <button onClick={this.handle1.bind(this)}>合成事件2</button>
        <button onClick={this.handle2}>合成事件3</button>
        <button
          onClick={(a) => {
            this.handle3(10, 20, 30, a)
          }}>
          合成事件4
        </button>
      </div>
    )
  }
}
